---
title: Guidelines
redirect_from:
  - /components/separator/
---

<ReactExample exampleId="Separator-default" />

## When to use

- To visually and semantically group related content.

## When not to use

- To create a hierarchy with larger sections of content---use a [heading](/components/text/heading/).
- To distinguish sections only visually, not semantically---use [color](/foundation/color/).

## Component status

<ComponentStatus component="Separator" />

## Content structure

![Separator: clearly separates sections of content.](fileId:4QJZqvBvRrLu6t9mwObCkA;nodeId:174%3A8)

## Behavior

### Use to group content

Separators present a visual cue to group together sections of content,
but they also have semantic value.
Remember that they add structure and aren't just decorative.

Use them to show groups like related menu items
and related text within a larger section.

<ReactExample exampleId="Separator-default" />

### Use only when necessary

Separators can be useful for grouping things and showing clear structures.
But when they start to appear everywhere,
they begin to lose their value.

Try making your designs clear with other separations,
such as white space and colors.
